<script setup>
	import { followDoctorApi } from '@/services/doctor.js'
	import { computed } from 'vue'

	const props = defineProps({
		list: { Array },
	})
	const width = computed(() => props.list.length * 300 + 'rpx')
	async function onFollowButtonClick(doctor) {
		const { code, data, message } = await followDoctorApi(doctor.id)
		// 检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 关注成功
		doctor.likeFlag = 1
	}
</script>

<template>
	<view class="doctor-list">
		<view class="command-header">
			<view class="command-header-title"> 推荐关注 </view>
			<view class="command-header-right">
				<navigator hover-class="none" url=" " class="more">查看更多</navigator>
				<uni-icons color="#c3c3c5" size="16" type="forward" />
			</view>
		</view>
		<scroll-view scroll-x>
			<view class="doctor-list-wrapper" :style="{ width: width }">
				<view class="doctor-item" v-for="item in props.list" :key="item.id">
					<image :src="item.avatar" class="doctor-avatar"></image>
					<text class="name">{{ item.name }}</text>
					<text class="site">{{ item.hospitalName }}{{ item.depName }}</text>
					<text class="rank">{{ item.positionalTitles }}</text>
					<button class="btn" v-if="item.likeFlag === 1">已关注</button>
					<button class="btn" v-else @click="onFollowButtonClick(item)">
						+ 关注
					</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<style lang="scss">
	.doctor-list {
		height: 480rpx;
		padding: 30rpx;
		padding-bottom: 0;
		margin-top: 10rpx;
		background-color: #f6f7f9;
		.command-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 1;
			margin-bottom: 20rpx;
			.command-header-title {
				font-size: 32rpx;
				color: #333;
			}
			.command-header-right {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #c3c3c5;
			}
		}
		.doctor-list-wrapper {
			display: flex;
			// width: 1500rpx;
		}
		.doctor-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 270rpx;
			height: 380rpx;
			padding: 30rpx;
			margin-right: 30rpx;
			box-sizing: border-box;
			background: white;
			border-radius: 20rpx;
			.doctor-avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
			}
			.name {
				font-size: 26rpx;
				color: #121826;
			}

			.site,
			.rank {
				width: 100%;
				font-size: 24rpx;
				text-align: center;
				color: #e6e6e6;
				@include text-overflow(1);
			}
			.btn {
				width: 150rpx;
				height: 58rpx;
				text-align: center;
				line-height: 58rpx;
				border-radius: 60rpx;
				margin-top: 20rpx;
				color: white;
				background-color: #2bd5a2;
				font-size: 24rpx;
			}
		}
	}
</style>